<html>
    <head>
        <title>编译模式</title>
    </head>
    <body>
        <script>
            /*
                        四、编译模式

                                weex 编译模式 和  uni-app 编译模式

                                如果你之前是 weex 开发者，可继续查阅本章节，否则可跳过看下一节 "快速上手"。

                                weex的组件和 js API，与 uni-app 不同。 uni-app 与微信小程序相同。

                                考虑到 weex 用户的迁移， uni-app 也支持 weex 的代码写法。在 manifest.json 中可以配置使用 "weex编译模式".

                                选择 weex 编译模式时将不支持 uni-app 的组件和 JS API，需要开发者参考 weex 官方文档的写法来写代码。

                                比如 weex 编译模式使用 <div>  。 uni-ap 编译模式使用该 <view>

                              
                                一般情况下建议使用 uni-app 模式，除非历史 weex 代码比较到，需要逐步过渡。同事注意 weex 编译模式的切换时项目级的，

                                不支持同项目下某个 nvue 页面使用 weex模式，另一个 nvue 页面使用 uni-app 模式。


                                                                weex编译模式                      uni-app 编译模式

                                                平台            仅App                             所有端，包含小程序和 H5

                                                组件            weex 组件 如 <div>                 uni-app 组件如 view

                                                声明周期        支持weex生命周期                    支持所有uni-app 声明周期

                                                JS API         weex API 、uni API、Plus API        weex API、uni API、Plus API

                                                单位           750px 是屏幕宽度，wx是固定像素单位    750rpx 是屏幕宽度， px 是固定像素单位

                                                全局样式        手动引入                            app.vue 的样式几维全局样式

                                                页面滚动         必须给页面套或组件                  默认支持页面滚动


                                在 manifest.json 中修改2中编译模式， manifest.json--- app-plus--nvueCompiler 来切换编译模式。

                                nvueCompiler 有两个值：

                                     ①、weex

                                     ②、uni-app

                                
                                eg:

                                        // manifest.json
                                        {
                                                // ...
                                                // App平台特有配置
                                                "app-plus": {
                                                        "nvueCompiler":"uni-app" //是否启用 uni-app 模式
                                                }
                                        }

                        
                                在 manifest.json 配置文件中，HBuilderX2.4 之前版本，默认值为 weex 模式，HBuilderX2.4+版本默认值改为 uni-app 模式。

                                weex 编译模式不支持 onNavigationBarButtonTap 生命周期函数的写法。
                                
                                在 nvue 中监听原生标题栏按钮点击事件，详见：uni.onNavigationBarButtonTap  https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle


                                weex编译模式不支持 onShow 生命周期，但熟悉5+ 的话，可以利用监听 webView的 addEventListener show 事件实现 onShow效果。

                                weex 编译模式不支持 vuex。

                                nvue的页面跳转，与 weex不同，仍然遵循uni-app的路由模型。  vue页面和 nvue 页面之间不管怎么跳转，都遵循这个模型。

                                包括nvue 页面调香nvue 页面。 每个页面都需要在 pages.json 中注册，调用 uni-app  的路由API进行跳转。



                                原生开发没有页面呢滚动的概念，页面内容高过屏幕高度时，内容并不会自动滚动；只有将页面内容放在 list、waterfall、scroll-view/scroller

                                这几个组件喜爱内容才可滚动。

                                这不符合前端开发的习惯，所以在 nvue 编译为 uni-app模式时，uni-app框架会给 nvue 页面外层自动嵌套一个 scroller ，从而实现页面内容的自动滚动。

                                、

                                ★、注意：

                                        ①、 uni-app 框架仅对 nvue 页面嵌套scroller 容器，不会给组件自动套 scroller 容器。

                                        ②、若 nvue 页面有 recyle-list 组件时， uni-app 框架也不会自动给页面嵌套 scroller 容器

                                        ③、过你不希望自动嵌套 scroller 容器，可在 pages.json 中通过如下配置进行关闭：

                                                {
                                                        "path": "",
                                                        "style": {
                                                                "disableScroll": true // 不嵌套 scroller
                                                        }
                                                }


                    */
        </script>
    </body>
</html>